<template>
  <div class="app-container">
    <!-- 授权表单 start -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 套餐分类与数据组合显示 -->
      <el-tab-pane v-for="(item,index) in listKeys" :key="index" :label="item==1?'计时套餐':item+'小时套餐'" :name="item+'meal'">
        <div style="text-align: center">
          <el-input
            v-model="keyWords"
            style="margin-bottom: 15px"
            placeholder="输入关键字进行过滤"
          />

          <el-tree
            :ref="item+'meal'"
            :data="list[index]"
            show-checkbox
            :default-checked-keys="ValueMeal"
            node-key="id"
            highlight-current
            :filter-node-method="filterNode"
            :props="defaultProps"
            @current-change="currentChange"
          />
        </div>
      </el-tab-pane>

    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogAuthVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleChange">确 定</el-button>
    </span>

  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 点击遮罩 是否可关闭
    checheds: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      // 表格数据 start
      tableColumns: [
        { label: '套餐名', prop: 'title' },
        {
          'label': '品牌',
          'prop': 'bloc.business_name'
        }, {
          'label': '店铺',
          'prop': 'store.name'
        },
        { label: '卡券类型', prop: 'type_str' },
        { label: '套餐价格（元）', prop: 'price' },
        { label: '每半小时续费单价（元）', prop: 'renew_price' },
        { label: '套餐时长（h）', prop: 'duration' },
        {
          label: '操作',
          slot: 'action',
          fixed: 'right',
          width: 200
        }
      ],
      // 表格数据end
      // 检索 start
      filterInfo: {
        data: {
          page: 1,
          pageSize: 10
        },
        fieldList: [
          { label: '标题', type: 'input', value: 'PartyAnswer[title]' }
        ]
      },
      total: 0,
      list: [],
      listKeys: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      activeName: '1meal',
      keyWords: '',
      excelList: [],
      // 默认选中套餐
      ValueMeal: []
    }
  },
  watch: {
    keyWords(val) {
      const activeName = this.activeName
      console.log('activeName', activeName, this.$refs)
      this.$refs[activeName][0].filter(val)
    }
  },
  created() {
    const listKeys = this.checheds.split(',')
    const listArr = {}

    listKeys.forEach((item, index) => {
      this.$set(listArr, item, Number(item))
    })
    this.ValueMeal = Object.values(listArr)
    this.getList()
  },
  methods: {
    handleClick() {},
    handleChange() {
      const that = this
      const arr = []
      that.listKeys.forEach((row, index) => {
        that.$refs[row + 'meal'][0].getCheckedNodes().forEach((item, k) => {
          arr.push(item)
        })
      })
      this.$emit('selectMeal', arr)
    },
    currentChange() {},
    filterNode(value, data) {
      console.log('检索', value, data)
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    handleSelectionChange(val) {
      console.log('传递来的', val)
    },
    handleRequestSuccess() {
    },
    selectType(val) {
      console.log(val)
    },
    getList() {
      const that = this
      that.listLoading = true
      setmealIndex(that.filterInfo.data).then((response) => {
        that.total = response.data.dataProvider.total
        const list = response.data.dataProvider.allModels
        // 对数据进行分组操作
        // const arr = []
        const m = new Map()
        list.map(item => {
          m.set(item.duration, [...(m.get(item.duration) || ''), item])
        })
        const objGroup = Object.fromEntries(m.entries())
        that.list = Object.values(objGroup)
        that.listKeys = Object.keys(objGroup)

        that.activeName = that.listKeys[0] + 'meal'
        console.log('列表数据层级测试')
        that.listLoading = false
      })
    },
    //  搜索
    handleFilter(row) {
      const that = this
      console.log(row)
      that.$set(that.filterInfo, 'data', row)
      console.log('检索前', that.filterInfo.data)
      that.getList()
    },
    handleReset(row) {
      console.log(row)
    },
    handleEvent(row) {
      console.log(row)
    },
    selectMeal(row) {
      this.$emit('selectMeal', row)
    }
  }
}
</script>
<style scoped>
.active {
  color: #fff;
  background-color: #409eff;
}
.isActive {
  color: #fff;
  background-color: #9ca1a1;
}
</style>
s
